<template>
   <div >
          <div class=" flex-start name">
            <div class="left">旧密码</div>
            <div class="right">
              <input
                type="text"
                class="searchInput"
                placeholder="请输入服务器名称"
              />
            </div>
          </div>
          <p class="c-error">请输入密码</p>
          <div class="password new flex-start">
            <div class="left pwd">新密码</div>

            <div class="right">
              <input type="text" class="searchInput" placeholder="请输入密码" />
            </div>
          </div>

          <div class="password confirm flex-start">
            <div class="left">确认密码</div>
            <div class="right">
              <input type="text" class="searchInput" placeholder="请输入密码" />
            </div>
          </div>
          <p class="c-error">两次密码输入不一致,请重新输入</p>
          <div class="btns flex-start">
            <div class="btn-white2" @click="cancel">取消</div>
            <div class="btn-blue2" @click="save">保存</div>
          </div>
        </div>

</template>

<script>
export default {
  methods: {
    save () {
      this.$emit('save')
    },
    cancel () {
      this.$emit('cancel')
    }
  }

}
</script>

<style lang="scss" scoped>
.name {
  margin-top: 40px;

  .left {
    width: 104px;
    text-align: right;
  }
}
.right{
    margin-left: 20px;
}

.password {
  margin-top: 8px;
  .left {
    width: 104px;
    text-align: right;
  }
}
.confirm {
  margin-top: 20px !important;
}
.btns {
  margin-top: 28px;
  .btn-white2 {
    width: 100px;
    margin-left: 127px;
  }
  .btn-blue2 {
    width: 100px;
    margin-left: 20px;
  }
  .signout{
      margin-left: 127px;
    }
}
.c-error{
  margin-left: 124px;
  margin-top: 8px;
}

</style>
